This link will take you to the W3 Schools, a fantastic resource for JQuery and other stuff.
| Type this... | ... to get this | |||||
|---|---|---|---|---|---|---|
|
First frame - without jQuery command <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQUERY "Hello World"</title>
<!-- <script src="js/jquery-1.11.2.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<p id="myParagraph">Without the jQUERY hide command, this paragraph shows up.</p>
</body>
</html>
Second frame - with jQuery command <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQUERY "Hello World"</title>
<!-- <script src="js/jquery-1.11.2.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<p id="myParagraph">Now with the jQUERY hide command, this paragraph does not show up.</p>
<script >
$(function(){
$("p").hide(); <!-- This command hides the paragraph above -->
}
);
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left.
Click on this link to see the result of the code on the left. Note that with the hide command, the paragraph does not show up. |
|||||
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Select html elements</title>
<style>
.bluebox{
background-color: blue;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: yellow;
height: auto;
width: auto;
}
.greenbox{
background-color: green;
height: auto;
width: auto;
}
#tool{
background-color: magenta;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div class="bluebox">
<p>App Designer is a <span id="tool">tool</span> we use to develop app engines.</p>
<p class="orange">Concordia implemented PeopleSoft in 2015.</p>
<p>SQL Developer allows us to query the database.</p>
</div>
<div class="yellowbox">
<p>If you can keep your head when all about you are losing theirs and blaming it on you;</p>
<ul>
<li>App Designer</li>
<li>Phire</li>
<li>Planner</li>
</ul>
<p>
<a href="https://www.ibm.com/ca-en">
This is a link to IBM
</a>
</p>
<p>
<a href="https://en.wikipedia.org/wiki/Main_Page">
This is a link to Wikipedia
</a>
</p>
</div>
<p>If you can trust yourself when all men doubt you, but make allowance for their doubting too:</p>
<div class="greenbox">
<p>If you can wait and not be tired by waiting, or, being lied about, don't deal in lies,</p>
<ul>
<li>App Designer</li>
<li>Phire</li>
<li>Planner</li>
</ul>
<table>
<tr><th>Name</th><th>Department</th><th>Position</th></tr>
<tr><td>Christine</td><td>Library</td><td>Head of Acquisitions & Serials</td></tr>
<tr><td>Colleen</td><td>Enrolment Services</td><td>Senior Service Team Assistant</td></tr>
<tr><td>Julia</td><td>Art Gallery</td><td>Max Stern Curator</td></tr>
<tr><td>Charles</td><td>IT</td><td>Boss</td></tr>
</table>
<p>
Enter a word in this box:
<input>
<button type="submit">
Submit
</button>
</p>
</div>
<script>
$(function(){
$("*").css("font-size", '14px');
$("p").css("text-align","center");
$("div > p").css("text-align","center");
$("div ~ p").css("text-align","center");
$("div p").css("text-align","center");
$("#tool").css("background-color","green");
$(".orange").css("background-color","orange");
$("div.bluebox").css("font-family","sans-serif");
$("p:first-child, p:last-child").css("text-decoration","underline");
$("[href]").css("color","red");
$("li:first-child, li:last-child").css("background-color","Gainsboro");
$("tr:even").css("background-color","RosyBrown");
$("tr:odd").css("background-color","Thistle");
$(":input").css("background-color","magenta");
$(":Submit").css("background-color","cyan");
$("div:has(table)").css("background-color","LightSkyBlue");
}
);
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Respond to events</title>
<style>
.bluebox{
background-color: blue;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: yellow;
height: auto;
width: auto;
}
.greenbox{
background-color: green;
height: auto;
width: auto;
}
#tool{
background-color: magenta;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div class="bluebox">
<p>App Designer is a <span id="tool">tool</span> we use to develop app engines.</p>
<p class="orange">Concordia implemented PeopleSoft in 2015.</p>
<p>SQL Developer allows us to query the database.</p>
</div>
<div class="yellowbox">
<p>If you can keep your head when all about you are losing theirs and blaming it on you;</p>
<ul>
<li>App Designer</li>
<li>Phire</li>
<li>Planner</li>
</ul>
<p>
<a href="https://www.ibm.com/ca-en">
This is a link to IBM
</a>
</p>
<p>
<a href="https://en.wikipedia.org/wiki/Main_Page">
This is a link to Wikipedia
</a>
</p>
</div>
<p>If you can trust yourself when all men doubt you, but make allowance for their doubting too:</p>
<div class="greenbox">
<p>If you can wait and not be tired by waiting, or, being lied about, don't deal in lies,</p>
<ul>
<li>App Designer</li>
<li>Phire</li>
<li>Planner</li>
</ul>
<table>
<tr><th>Name</th><th>Department</th><th>Position</th></tr>
<tr><td>Christine</td><td>Library</td><td>Head of Acquisitions & Serials</td></tr>
<tr><td>Colleen</td><td>Enrolment Services</td><td>Senior Service Team Assistant</td></tr>
<tr><td>Julia</td><td>Art Gallery</td><td>Max Stern Curator</td></tr>
<tr><td>Charles</td><td>IT</td><td>Boss</td></tr>
</table>
</div>
<p>
Enter a word in this box:
<input id="input">
<button type="submit" id="submit">
Submit
</button>
</p>
<script>
$(function(){
$("p").mouseover(function(){
$(this).css("background-color","OldLace");
}
);
$("p").mouseout(function(){
$(this).css("background-color","");
}
);
$("input").focus(function(){
$(this).css("background-color","Red");
}
);
$("input").blur(function(){
$(this).css("background-color","PaleGreen");
}
);
$("input").keyup(function(){
$(this).css("background-color","Orange");
}
);
$("#submit").click(function(){
$("#input").css("background-color","#ffffff");
$("#input").val("");
}
);
}
);
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Respond to events</title>
<style>
.bluebox{
background-color: blue;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: yellow;
height: auto;
width: auto;
}
.greenbox{
background-color: palegreen;
height: auto;
width: auto;
}
#tool{
background-color: magenta;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="changebluebox">
Change the blue box.
</button>
<button id="changeyellowbox">
Change the yellow box
</button>
<button id="changegreenbox">
Change the green box
</button>
<button id="changeInput">
Change Input value.
</button>
<button id="addText">
Add text.
</button>
<p> </p>
<div class="bluebox">
<p id = "bluepara">App Designer is a <span id="tool">tool</span> we use to develop app engines.</p>
<p class="orange">Concordia implemented PeopleSoft in 2015.</p>
<p>SQL Developer allows us to query the database.</p>
</div>
<div class="yellowbox" id = "yellowbox">
<p>If you can keep your head when all about you are losing theirs and blaming it on you;</p>
</div>
<p>If you can trust yourself when all men doubt you, but make allowance for their doubting too:</p>
<div class="greenbox" id="greenbox">
<p id="greenpara1">If you can wait and not be tired by waiting, or, being lied about, don't deal in lies,</p>
<p id="greenpara2">
<a href="http://www.wikipedia.com" title="Wikipedia" id="WikipediaLink">
WMF Link.
</a>
</p>
<p></p>
</div>
<p>
Enter a word in this box:
<input id="input">
<button type="submit" id="submit">
Submit
</button>
</p>
<script>
$(function(){
$("#changebluebox").click(function(){
$("#bluepara").text("E pluribus unum");
}
);
$("#changeyellowbox").click(function(){
$("#yellowbox").html("<p>Testing... </p><p>1, 2, 3</p>");
}
);
$("#changeInput").click(function(){
$("input").val("Tested");
}
);
$("#changegreenbox").click(function(){
$("#WikipediaLink").attr({"href" : "http://www.wiktionary.com", "title" : "Wiktionary"});
}
);
$("#addText").click(function(){
$("#greenpara1").after("<p>New paragraph.</p>");
}
);
}
);
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Style changes with jQuery</title>
<style>
.bluebox{
background-color: blue;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: yellow;
height: auto;
width: auto;
}
.greenbox{
background-color: palegreen;
height: auto;
width: auto;
}
#tool{
background-color: magenta;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="changebluebox">
Change the blue box.
</button>
<button id="changegreenbox">
Change the green box
</button>
<button id="changeTool">
Change Tool
</button>
<p> </p>
<div class="bluebox" id = "bluebox">
<p id = "bluepara">App Designer is a <span id="tool">tool</span> we use to develop app engines.</p>
<p class="orange">Concordia implemented PeopleSoft in 2015.</p>
<p>SQL Developer allows us to query the database.</p>
</div>
<div class="yellowbox sans-serif" id = "yellowbox">
<p>If you can keep your head when all about you are losing theirs and blaming it on you;</p>
</div>
<div class="greenbox" id="greenbox">
<p id="greenpara1">If you can wait and not be tired by waiting, or, being lied about, don't deal in lies,</p>
<p id="greenpara2">
<a href="http://www.wikipedia.com" title="Wikipedia" id="WikipediaLink">
WMF Link.
</a>
</p>
</div>
<script>
$(function(){
$("#changebluebox").click(function(){
$("#bluebox").css("width",100*Math.random()-50 + $("#bluebox").width());
$("#bluebox").addClass("greenbox");
}
);
$("#yellowbox").click(function(){
$("#yellowbox").removeClass("sans-serif");
$("#yellowbox").css("position","absolute");
$("#yellowbox").css({'top': 200*Math.random(), 'left': 200*Math.random(), 'background-color': 'rgb(' + Math.floor(256*Math.random()) + ',' + Math.floor(256*Math.random()) + ',' + Math.floor(256*Math.random()) + ')'});
}
);
$("#changegreenbox").click(function(){
$("#greenbox").toggleClass("greenbox");
}
);
$("#changeTool").click(function(){
$("#tool").wrap("<div></div>");
}
);
}
);
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>jQuery effects</title>
<style>
.bluebox{
background-color: blue;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: yellow;
height: auto;
width: auto;
}
.greenbox{
background-color: palegreen;
height: auto;
width: auto;
}
#tool{
background-color: magenta;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="Fadeoutbluebox">
Fade out the blue box.
</button>
<button id="Fadeinbluebox">
Fade in the blue box
</button>
<button id="Fadetoggleallboxes">
Toggle all boxes
</button>
<button id="animation">
Animate the greenbox
</button>
<p> </p>
<div class="bluebox" id = "bluebox">
<p id = "bluepara">App Designer is a <span id="tool">tool</span> we use to develop app engines.</p>
<p class="orange">Concordia implemented PeopleSoft in 2015.</p>
<p>SQL Developer allows us to query the database.</p>
</div>
<div class="yellowbox sans-serif" id = "yellowbox">
<p>If you can keep your head when all about you are losing theirs and blaming it on you;</p>
</div>
<div class="greenbox" id="greenbox">
<p id="greenpara1">If you can wait and not be tired by waiting, or, being lied about, don't deal in lies,</p>
<p id="greenpara2">
<a href="http://www.wikipedia.com" title="Wikipedia" id="WikipediaLink">
WMF Link.
</a>
</p>
</div>
<script>
$(function(){
$("#Fadeoutbluebox").click(function(){
$("#bluebox").fadeOut(3000);
}
);
$("#Fadeinbluebox").click(function(){
$("#bluebox").fadeIn(3000);
}
);
$("#Fadetoggleallboxes").click(function(){
$("#bluebox").fadeToggle(1000);
$("#yellowbox").fadeToggle(2000);
$("#greenbox").fadeToggle(3000);
}
);
$("#animation").click(function(){
$("#greenbox").animate({width:'200px'}, "slow");
$("#greenbox").animate({height:'300px'}, "slow");
$("#greenbox").animate({height:'100px'}, "slow");
$("#greenbox").delay(3000).animate({width:'550px'}, "slow");
}
);
}
);
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
|
Click on this link to see the result of the code on the left. |
|||||
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>jQuery UI</title>
<style>
.bluebox{
background-color: blue;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: yellow;
height: auto;
width: auto;
}
.greenbox{
background-color: palegreen;
height: auto;
width: auto;
}
#tool{
background-color: magenta;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/blitzer/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
<div class="bluebox ui-corner-all" id = "bluebox">
<p id = "bluepara">App Designer is a <span id="tool">tool</span> we use to develop app engines.</p>
<p class="orange">Concordia implemented PeopleSoft in 2015.</p>
<p>SQL Developer allows us to query the database.</p>
</div>
<div class="yellowbox ui-corner-all" id = "yellowbox">
<p>If you can keep your head when all about you are losing theirs and blaming it on you;</p>
</div>
<div class="greenbox ui-corner-all" id="greenbox">
<p id="greenpara1">If you can wait and not be tired by waiting, or, being lied about, don't deal in lies,</p>
<p id="greenpara2">
<a href="http://www.wikipedia.com" title="Wikipedia" id="WikipediaLink">
WMF Link.
</a>
</p>
</div>
<div class="ui-state-error" style="height:100px;margin-top:20px" id = "errorbox">
<p>
Error Message.
</p>
</div>
<script>
var message =["I'm moving!","I'm really moving!","Wow!","Uncanny!"];
$(function(){
$("#bluebox").draggable({
start: function(){
$("#yellowbox").css("background-color","SkyBlue");
},
drag: function(){
$("#bluebox").css("background-color",'rgb(' + Math.floor(256*Math.random()) + ',' + Math.floor(256*Math.random()) + ',' + Math.floor(256*Math.random()) + ')');
$("#bluebox").find("p").html(message[Math.floor(4*Math.random())]);
},
stop: function(){
$("#yellowbox").css("background-color","RosyBrown");
$(this).html('<p>And we stopped!</p>')
}
});
$("#yellowbox").draggable({
axis: "y"
});
$("#greenbox").draggable({
axis: "x"
});
$("#errorbox").droppable();
});
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Resizable</title>
<style>
.bluebox{
background-color: blue;
color: white;
height: auto;
width:auto;
}
.yellowbox{
background-color: yellow;
height: auto;
width: auto;
}
.greenbox{
background-color: palegreen;
height: auto;
width: auto;
}
#tool{
background-color: magenta;
}
#container{
width: 300px;
height: 300px;
border-style: dotted;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/blitzer/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
<div class="bluebox ui-corner-all" id = "bluebox">
<p id = "bluepara">App Designer is a <span id="tool">tool</span> we use to develop app engines.</p>
<p class="orange">Concordia implemented PeopleSoft in 2015.</p>
<p>SQL Developer allows us to query the database.</p>
</div>
<div id="container">
<div class="yellowbox ui-corner-all" id = "yellowbox">
<p>If you can keep your head when all about you are losing theirs and blaming it on you;</p>
</div>
</div>
<div class="greenbox ui-corner-all" id="greenbox">
<p id="greenpara1">If you can wait and not be tired by waiting, or, being lied about, don't deal in lies,</p>
<p id="greenpara2">
<a href="http://www.wikipedia.com" title="Wikipedia" id="WikipediaLink">
WMF Link.
</a>
</p>
</div>
<script>
$(function(){
$("#bluebox").resizable({
maxHeight: 200,
minHeight: 50,
minWidth: 100,
maxWidth: 300,
aspectRatio: 4/3,
ghost: true,
alsoResize: "#greenbox"
});
$("#yellowbox").resizable({
containment: "#container",
animate: true
});
});
</script>
</body>
</html>
|
Click on this link to see the result of the code on the left. |
|||||